<html>
  <head>
    <meta charset="utf-8">
    <title>Learn3D</title>
    <link rel="stylesheet" href="public/webgl.css" type="text/css">
  </head>
  <script src="public/gl-matrix.js"></script>
  <script src="vertexAnim.js"></script>
  <style type="text/css">
      div#canvas-frame {
          border: none;
          cursor: pointer;
          width: 512px;
          height: 512px;
          background-color: rgb(238, 238, 238);
      }
      div#horizontal {
          display: flex;
      }
  </style>

  <body onload="main();" ondblclick="end();" onkeypress="onKeyPress(event)" >
    <canvas id="glcanvas" width="512" height="512"></canvas>

    <div id="horizontal">
        <button style="display:block; margin:5; width: 200px; height: 30px" onclick="updateShader()">编译并运行下面着色程序</button>
        <button style="display:block; margin:5; width: 60px; height: 30px" onclick="resume()">继续</button>
        <button style="display:block; margin:5; width: 60px; height: 30px" onclick="pause()">暂停</button>
    </div>

    <div id="vertical">
        <div id="horizontal" style="width: 90em;">
            <div id="vertical">
                <b>VertexShader</b>
                <textarea spellcheck="false" rows="33" cols="95" id="id_vertex_shader">
attribute vec4 aPosition;
attribute vec2 aTexCoord;

uniform mat4   uModelMatrix;
uniform mat4   uViewMatrix;
uniform mat4   uProjectionMatrix;

uniform float  uAngle;
uniform float  uWidthSpan;
uniform float  uHeightSpan;

varying vec2   vTexCoord;

#define PI     3.14159265359

void main() {
    float angleSpanH = 4.0 * PI;
    float startX = -uWidthSpan / 2.0;
    float curAngleH = uAngle + ((aPosition.x - startX) / uWidthSpan) * angleSpanH;
    float tzH = sin(curAngleH) * 0.2;

    float angleSpanZ = 4.0 * PI;
    float startY = -uHeightSpan / 2.0;
    float curAngleZ = uAngle + PI / 3.0 + ((aPosition.y - startY) / uHeightSpan) * angleSpanZ;
    float tzZ = sin(curAngleZ) * 0.1;

    vec4 pntPos = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aPosition.x, aPosition.y, tzH, 1);  //  + tzZ
    gl_Position = pntPos;

    vTexCoord = aTexCoord;
}
                </textarea>
            </div>
            <div id="vertical">
                <b>FragmentShader</b>
                <textarea spellcheck="false" rows="33" cols="95" id="id_fragment_shader">
precision mediump float;

uniform sampler2D uTexSampler;
varying vec2 vTexCoord;

void main() {
    gl_FragColor = texture2D(uTexSampler, vTexCoord);
}
                </textarea>
            </div>
        </div><br>
    </div>
  </body>

</html>
